<template>
	<view>
		<wyb-popup ref="popup" type="bottom" height="600" :maskClickClose='true' radius="12" :showCloseIcon="false">
			<view class="popup-content">
				<view class="popup_content_title"> {{ pickerTittle }}
					<view class="iconfont icon-close icon_top" @tap="handleHide()"></view>
				</view>
				<view class="dialog_search_box">
					<view class="cuIcon-search text-grey dialog_search_text"></view>
					<input type="text" @input="inputValue" v-model="input_value" placeholder="搜索"
						class="dialog_search_inp" />
					<view v-if="type != 6" class="add" @click="ayuAdd">添加</view>
				</view>
				<scroll-view scroll-y="true" class="select_item_box">
					<view class="select_item" hover-class="select_item_hover" @click="handleSelect(ele)"
						v-for="(ele, index) in options" :key="index">
						{{ ele.dictValue || ele.name }}
					</view>
				</scroll-view>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
import wybPopup from './wyb-popup.vue'
export default {
	components: {
		wybPopup
	},
	props: {
		pickerList: {
			type: Array,
			default: () => []
		},
		pickerTittle: {
			type: String,
			default: '选择'
		},
		type: {},
	},
	watch: {
		pickerList: {
			handler: function (val, oldVal) {
				this.list = val;
				this.options = val;
			},
			immediate: true,
			deep: true // 深度监听
		},
	},
	data() {
		return {
			input_value: '',
			list: [],
			options: [],
		}
	},
	onLoad() {
	},
	created() {
		this.options = this.list;
	},
	methods: {
		ayuAdd() {
			if (this.input_value.trim().length == 0) return
			this.handleSelect({ dictValue: this.input_value })
		},
		handleHide() {
			this.$refs.popup.hide()
			var a = this
			setTimeout(() => {
				a.input_value = ''
				a.options = a.list
			}, 100)
		},
		handleShow() {
			this.$refs.popup.show()
		},
		handleSelect(item) {
			var a = this
			a.$emit('change', item)
			a.$refs.popup.hide()
			setTimeout(() => {
				a.input_value = ''
				a.options = a.list
			}, 100)
		},
		inputValue(e) {
			var a = this
			var inputTxt = e.detail.value;
			a.options = []
			if (inputTxt.length == 0) {
				a.options = a.list;
			} else {
				a.options = a.list.filter(o => {
					return String(o.dictValue || o.name).indexOf(e.detail.value) >= 0
				})
			}
		},
	}
}
</script>

<style lang="scss">
@import "./iconfont.css";

.add {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30rpx;
	color: #0b57d0;
	width: 150rpx;
	height: 100%;
}

.popup_content_title {
	padding-top: 30rpx;
	text-align: center;
	margin-bottom: 30rpx;
	position: relative;
	font-size: 36rpx;

	.icon_top {
		font-size: 50rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}
}

.dialog_search_box {
	width: 680rpx;
	height: 80rpx;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;

	.dialog_search_text {
		margin-left: 30rpx;
		font-size: 30rpx;
	}

	.dialog_search_inp {
		height: 76rpx;
		line-height: 76rpx;
		text-align: left;
		padding-left: 20rpx;
		width: 590rpx;
	}
}

.select_item_box {
	width: 750rpx;
	height: 380rpx;
	color: #333;

	.select_item {
		width: 680rpx;
		margin: 0 auto;
		padding: 16rpx 0;
		font-size: 30rpx;
		text-align: center;
	}

	.select_item_hover {
		background-color: #f8f8f8;
	}
}
</style>
